<template>
  <div class="page">
    <div class="top">
      <div class="icon">
        <div class="left">
          <img src="../assets/icon/zhixiangzuo.svg" alt="" class="toLeft" />
        </div>
        <div class="right">
          <img src="../assets/icon/lishidingdan.svg" alt="" />
          <img src="../assets/icon/wentiguanli.svg" alt="" class="wenti" />
        </div>
      </div>
      <div class="ETH">封装 Beacon ETH (WBETH)</div>
      <div class="msg">
        流動性質押 - 利用質押獎勵和額外 DeFi 利得賺取被動收入。
        <div class="lian">
          <div class="ytficon">
            <img src="../assets/icon/charulianjie.svg" alt="" />以太坊 :
            0xa2E33566
          </div>
          <div class="ytficon">
            <img src="../assets/icon/charulianjie.svg" alt="" />BNB智能鏈 :
            0xa2E33566
          </div>
        </div>
      </div>
    </div>
    <div class="scroll">
      <div class="content">
        <div class="income">BETH餘額</div>
        <div class="earnings">0 <span>BETH</span></div>
        <div class="income" style="padding-top: 0">=0 WBETH</div>

        <div class="zhuanhuan">
          <span>1 BETH = 0.97367319 WBETH</span
          ><img src="../assets/icon/jiaohuan.svg" alt="" />
        </div>
        <div class="fzl">封裝率</div>
      </div>
      <div class="introduce">
        <div class="title">
          <div @click="setType('fz')">
            <span :class="{ active: type == 'fz' }">封裝</span>
          </div>
          <div @click="setType('jcfz')">
            <span :class="{ active: type == 'jcfz' }">解除封裝</span>
          </div>
        </div>
        <div class="fz" v-if="type == 'fz'">
          <div class="num">
            <div class="ti">數量</div>
            <div class="inp">
              <input type="text" name="" id="" />
              <img src="../assets/icon/yitaifang.svg" alt="" />
              <span class="BETH">BETH</span>
              <div class="zd">最大</div>
            </div>
            <div class="ky">可用資產: 0 BETH</div>
          </div>
          <img src="../assets/icon/xiangxia3.svg" class="xiangxia" alt="" />
          <div class="fz1">
            <div class="ti">封裝成</div>
            <div class="inp">
              <input type="text" name="" id="" />
              <img src="../assets/icon/yitaifang.svg" alt="" />
              <span class="BETH">WBETH</span>
            </div>
            <div class="fzbtn">封裝</div>
          </div>
        </div>
        <div class="br" v-if="type == 'fz'"></div>
        <div class="lishi" v-if="type == 'fz'">
          <div class="ti">
            <div class="left">WBETH:BETH 比率歷史記錄</div>
            <div class="right">
              <img src="../assets/icon/riqi.svg" alt="" />
            </div>
          </div>
          <div class="time">
            <div>
              <div class="label" style="margin-left: 0">日期</div>
              <div class="number">2024-01-03</div>
            </div>
            <div>
              <div class="label">比率</div>
              <div class="number">1.02703864</div>
            </div>
            <div>
              <div class="label">BETH APR</div>
              <div class="number coloe">3%</div>
            </div>
          </div>
          <div id="echarts" style="height: 300px"></div>
        </div>
        <div class="jcfz" v-if="type == 'jcfz'"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "oneOne",
  data() {
    return {
      type: "fz",
    };
  },
  methods: {
    setType(type) {
      this.type = type;
    },
  },
  mounted() {
    let chartDom = document.getElementById('echarts')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      grid: {
        containLabel: true,
        y: 30,
        x: 10,
        x2: 20,
        y2: 30,
      },
      xAxis: {
        type: "category",
        data: ["12/30", "12/31", "1/1", "1/2", "1/3"],
        axisLabel: {},
        boundaryGap: false,
      },
      yAxis: {
        type: "value",
        min: 1,
        axisLabel: {
          formatter: function (value) {
            console.log(value, "value");
            return value.toFixed(6); // 保留两位小数
          },
        },
      },
      series: [
        {
          data: [1.0, 1.006759, 1.013519, 1.020278, 1.027038],
          type: "line",
          itemStyle: {
            normal: {
              color: "#c7a63d",
              lineStyle: {
                color: "#c7a63d",
              },
            },
          },
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>

<style scoped>
.time {
  display: flex;
  font-size: 10px;
  margin: 10px 20px;
}
.time .label {
  margin-left: 20px;
  margin-right: 10px;
  color: #4a505a;
}
.time .coloe {
  color: #478d7c;
}
.time > div {
  display: flex;
}
.lishi {
  color: #939ba4;
  font-size: 12px;
}
.lishi .ti {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #2c323c;
}
.lishi .ti img {
  width: 15px;
}
.br {
  height: 5px;
  background-color: #171e26;
}
.fz1 input {
  width: 75% !important;
}
.scroll {
  overflow-y: scroll;
}
.fz1 .fzbtn {
  width: 100%;
  text-align: center;
  background-color: #434c5b;
  height: 45px;
  line-height: 45px;
  border-radius: 5px;
  font-size: 12px;
  margin-top: 10px;
}
.introduce .xiangxia {
  width: 20px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 20px 0;
}
.fz {
  margin: 20px;
  color: #757d86;
  font-size: 12px;
}
.fz .ky {
  font-size: 10px;
}
.fz .inp {
  display: flex;
  align-items: center;
  background-color: #333b48;
  height: 50px;
  border-radius: 5px;
  margin: 6px 0;
}
.fz .inp .BETH {
  display: inline-block;
  margin: 0 10px 0 6px;
}
.fz .inp img {
  width: 15px;
}
.fz .inp input {
  background-color: transparent;
  border: none;
  height: 100%;
  width: 70%;
}
.fz .zd {
  color: #c8c159;
}
.introduce .title {
  display: flex;
  color: #757d86;
  font-size: 12px;
}
.introduce .title div {
  width: 50%;
  text-align: center;
}
.introduce .title div span {
  padding: 10px 0;
  display: inline-block;
}
.introduce .title div .active {
  border-bottom: 2px solid #f2ba12;
  color: #fff;
}
.content .fzl {
  margin: 6px 0 15px 14px;
  color: #808791;
  font-size: 12px;
}
.content .zhuanhuan {
  display: flex;
  align-items: center;
  margin: 20px 5px 6px 14px;
}
.content .zhuanhuan img {
  width: 20px;
}
.content .zhuanhuan span {
  font-size: 12px;
  background-color: #392706;
  color: #fff;
  display: inline-block;
  margin-right: 10px;
  padding: 5px;
}
.lian {
  font-size: 10px;
  color: #c8c159;
  display: flex;
  margin-top: 5px;
}
.ytficon {
  display: flex;
  align-items: center;
  background-color: #2a3141;
  padding: 5px;
  border-radius: 5px;
  margin-right: 5px;
}
.ytficon img {
  margin-right: 5px;
}
.page {
  background-color: #171e26;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
}
.introduce {
  display: flex;
  flex-direction: column;
  background-color: #1f2630;
  border-radius: 20px 20px 0 0;
}
.introduce .Process {
  color: #c9ccd5;
  font-size: 16px;
  margin-left: 14px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.introduce .Process span {
  display: inline-block;
  color: black;
  width: 25px;
  text-align: center;
  border-radius: 3px;
  background-color: #fcd434;
  font-size: 13px;
}
.operate {
  margin-top: auto;
  margin-bottom: 35px;
}
.operate .ransom {
  width: 46%;
  font-size: 14px;
  font-weight: 550;
  height: 45px;
  margin-left: 15px;
  border-radius: 4px;
  border: none;
  background-color: #333b48;
  color: #c9ccd5;
}
.operate .pledge {
  width: 46%;
  font-size: 14px;
  font-weight: 550;
  height: 45px;
  margin-left: 5px;
  border-radius: 4px;
  border: none;
  background-color: #fcd434;
  color: black;
}
.content {
  background-color: #1f2630;
  margin: 20px;
  padding-bottom: 5px;
}
.content .income {
  font-size: 12px;
  padding-top: 12px;
  margin-left: 14px;
  color: #808791;
}
.content .income_1 {
  font-size: 12px;
  padding-top: 8px;
  margin-left: 14px;
  color: #808791;
}
.content .earnings {
  color: #c9ccd5;
  font-size: 18px;
  margin-left: 14px;
  margin-top: 6px;
}
.content .YTDEarnings {
  font-size: 18px;
  margin-left: 14px;
  margin-top: 6px;
  color: #4d9984;
}

.content .earnings span {
  font-size: 13px;
}
.content .YTDEarnings span {
  color: #c9ccd5;
  font-size: 13px;
}
.top .icon {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top {
  padding: 0 20px;

  background-color: #1f2630;
  color: #fff;
  padding-bottom: 1px;
}
.top .msg {
  font-size: 12px;
  color: #808791;
  margin-top: 5px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.top .msg img {
  width: 15px;
  height: 15px;
}
.top .msg span {
  color: #4d9984;
  margin-right: 5px;
}
.top .ETH {
  font-size: 16px;
  font-weight: bold;
}
.top .ETH span {
  font-size: 15px;
}
.top img {
  width: 20px;
  height: 20px;
}
.wenti {
  margin-left: 20px;
}
</style>
